<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MinIO文件上传测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .content {
            padding: 40px;
        }
        
        .upload-section {
            margin-bottom: 40px;
        }
        
        .upload-section h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5em;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .file-input-wrapper {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #f8f9fa;
            border: 2px dashed #667eea;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 20px;
        }
        
        .file-input-wrapper:hover {
            background: #e3f2fd;
            border-color: #764ba2;
        }
        
        .file-input-wrapper input[type="file"] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        .file-input-wrapper .upload-icon {
            font-size: 3em;
            color: #667eea;
            margin-bottom: 15px;
        }
        
        .file-input-wrapper .upload-text {
            color: #666;
            font-size: 1.1em;
        }
        
        .selected-files {
            margin-top: 20px;
        }
        
        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            border-left: 4px solid #667eea;
        }
        
        .file-info {
            flex: 1;
        }
        
        .file-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .file-size {
            color: #666;
            font-size: 0.9em;
        }
        
        .upload-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: bold;
            transition: all 0.3s ease;
            margin-right: 10px;
        }
        
        .upload-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }
        
        .upload-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .result-section {
            margin-top: 30px;
            padding: 20px;
            border-radius: 10px;
            display: none;
        }
        
        .result-success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .result-error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .result-content {
            margin-top: 10px;
        }
        
        .file-url {
            word-break: break-all;
            background: rgba(255,255,255,0.5);
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
        }
        
        .progress-bar {
            width: 100%;
            height: 6px;
            background: #e9ecef;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 10px;
            display: none;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .batch-upload {
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid #eee;
        }
        
        .bucket-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 1em;
            margin-bottom: 20px;
            transition: border-color 0.3s ease;
        }
        
        .bucket-input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 2px solid #e9ecef;
        }
        
        .tab {
            padding: 15px 30px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            font-weight: bold;
        }
        
        .tab.active {
            border-bottom-color: #667eea;
            color: #667eea;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📁 MinIO文件上传测试</h1>
            <p>测试MinIO文件存储服务的上传、下载、删除功能</p>
        </div>
        
        <div class="content">
            <div class="tabs">
                <div class="tab active" onclick="switchTab('single')">单文件上传</div>
                <div class="tab" onclick="switchTab('batch')">批量上传</div>
                <div class="tab" onclick="switchTab('bucket')">指定存储桶</div>
            </div>
            
            <!-- 单文件上传 -->
            <div id="single-upload" class="tab-content active">
                <div class="upload-section">
                    <h2>📤 单文件上传</h2>
                    <div class="file-input-wrapper" onclick="document.getElementById('single-file').click()">
                        <div class="upload-icon">📁</div>
                        <div class="upload-text">点击选择文件或拖拽文件到此处</div>
                        <input type="file" id="single-file" accept="*/*" style="display: none;">
                    </div>
                    
                    <div class="selected-files" id="single-files"></div>
                    
                    <button class="upload-btn" onclick="uploadSingleFile()" id="single-upload-btn" disabled>
                        上传文件
                    </button>
                    
                    <div class="progress-bar" id="single-progress">
                        <div class="progress-fill" id="single-progress-fill"></div>
                    </div>
                </div>
            </div>
            
            <!-- 批量上传 -->
            <div id="batch-upload" class="tab-content">
                <div class="upload-section">
                    <h2>📦 批量文件上传</h2>
                    <div class="file-input-wrapper" onclick="document.getElementById('batch-files').click()">
                        <div class="upload-icon">📦</div>
                        <div class="upload-text">点击选择多个文件或拖拽文件到此处</div>
                        <input type="file" id="batch-files" accept="*/*" multiple style="display: none;">
                    </div>
                    
                    <div class="selected-files" id="batch-files-list"></div>
                    
                    <button class="upload-btn" onclick="uploadBatchFiles()" id="batch-upload-btn" disabled>
                        批量上传
                    </button>
                    
                    <div class="progress-bar" id="batch-progress">
                        <div class="progress-fill" id="batch-progress-fill"></div>
                    </div>
                </div>
            </div>
            
            <!-- 指定存储桶上传 -->
            <div id="bucket-upload" class="tab-content">
                <div class="upload-section">
                    <h2>🪣 指定存储桶上传</h2>
                    <input type="text" class="bucket-input" id="bucket-name" placeholder="请输入存储桶名称（可选）">
                    
                    <div class="file-input-wrapper" onclick="document.getElementById('bucket-file').click()">
                        <div class="upload-icon">🪣</div>
                        <div class="upload-text">点击选择文件或拖拽文件到此处</div>
                        <input type="file" id="bucket-file" accept="*/*" style="display: none;">
                    </div>
                    
                    <div class="selected-files" id="bucket-files"></div>
                    
                    <button class="upload-btn" onclick="uploadToBucket()" id="bucket-upload-btn" disabled>
                        上传到指定存储桶
                    </button>
                    
                    <div class="progress-bar" id="bucket-progress">
                        <div class="progress-fill" id="bucket-progress-fill"></div>
                    </div>
                </div>
            </div>
            
            <!-- 结果显示 -->
            <div class="result-section" id="result-section">
                <div class="result-content" id="result-content"></div>
            </div>
        </div>
    </div>

    <script>
        // 切换标签页
        function switchTab(tabName) {
            // 隐藏所有标签内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 移除所有标签的active状态
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的标签内容
            document.getElementById(tabName + '-upload').classList.add('active');
            
            // 激活选中的标签
            event.target.classList.add('active');
        }
        
        // 文件选择处理
        document.getElementById('single-file').addEventListener('change', function(e) {
            handleFileSelect(e.target.files, 'single');
        });
        
        document.getElementById('batch-files').addEventListener('change', function(e) {
            handleFileSelect(e.target.files, 'batch');
        });
        
        document.getElementById('bucket-file').addEventListener('change', function(e) {
            handleFileSelect(e.target.files, 'bucket');
        });
        
        // 处理文件选择
        function handleFileSelect(files, type) {
            const container = document.getElementById(type + '-files');
            const uploadBtn = document.getElementById(type + '-upload-btn');
            
            container.innerHTML = '';
            
            if (files.length > 0) {
                uploadBtn.disabled = false;
                
                for (let file of files) {
                    const fileItem = document.createElement('div');
                    fileItem.className = 'file-item';
                    fileItem.innerHTML = `
                        <div class="file-info">
                            <div class="file-name">${file.name}</div>
                            <div class="file-size">${formatFileSize(file.size)}</div>
                        </div>
                    `;
                    container.appendChild(fileItem);
                }
            } else {
                uploadBtn.disabled = true;
            }
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 显示结果
        function showResult(message, isSuccess = true, data = null) {
            const resultSection = document.getElementById('result-section');
            const resultContent = document.getElementById('result-content');
            
            resultSection.className = 'result-section ' + (isSuccess ? 'result-success' : 'result-error');
            resultContent.innerHTML = message;
            
            if (data) {
                if (Array.isArray(data)) {
                    data.forEach((url, index) => {
                        resultContent.innerHTML += `<div class="file-url">文件${index + 1}: ${url}</div>`;
                    });
                } else {
                    resultContent.innerHTML += `<div class="file-url">${data}</div>`;
                }
            }
            
            resultSection.style.display = 'block';
            
            // 3秒后自动隐藏
            setTimeout(() => {
                resultSection.style.display = 'none';
            }, 5000);
        }
        
        // 显示进度条
        function showProgress(type, progress) {
            const progressBar = document.getElementById(type + '-progress');
            const progressFill = document.getElementById(type + '-progress-fill');
            
            progressBar.style.display = 'block';
            progressFill.style.width = progress + '%';
            
            if (progress >= 100) {
                setTimeout(() => {
                    progressBar.style.display = 'none';
                    progressFill.style.width = '0%';
                }, 1000);
            }
        }
        
        // 单文件上传
        async function uploadSingleFile() {
            const fileInput = document.getElementById('single-file');
            const uploadBtn = document.getElementById('single-upload-btn');
            
            if (!fileInput.files[0]) {
                showResult('请先选择文件', false);
                return;
            }
            
            uploadBtn.disabled = true;
            showProgress('single', 10);
            
            try {
                const formData = new FormData();
                formData.append('file', fileInput.files[0]);
                
                showProgress('single', 30);
                
                const response = await fetch('/file/upload', {
                    method: 'POST',
                    body: formData
                });
                
                showProgress('single', 70);
                
                const result = await response.json();
                
                showProgress('single', 100);
                
                if (result.code === 1) {
                    showResult('文件上传成功！', true, result.data);
                    fileInput.value = '';
                    document.getElementById('single-files').innerHTML = '';
                } else {
                    showResult('文件上传失败：' + result.msg, false);
                }
            } catch (error) {
                showProgress('single', 100);
                showResult('文件上传失败：' + error.message, false);
            } finally {
                uploadBtn.disabled = false;
            }
        }
        
        // 批量上传
        async function uploadBatchFiles() {
            const fileInput = document.getElementById('batch-files');
            const uploadBtn = document.getElementById('batch-upload-btn');
            
            if (!fileInput.files.length) {
                showResult('请先选择文件', false);
                return;
            }
            
            uploadBtn.disabled = true;
            showProgress('batch', 10);
            
            try {
                const formData = new FormData();
                for (let file of fileInput.files) {
                    formData.append('files', file);
                }
                
                showProgress('batch', 30);
                
                const response = await fetch('/file/upload/batch', {
                    method: 'POST',
                    body: formData
                });
                
                showProgress('batch', 70);
                
                const result = await response.json();
                
                showProgress('batch', 100);
                
                if (result.code === 1) {
                    showResult('批量文件上传成功！', true, result.data);
                    fileInput.value = '';
                    document.getElementById('batch-files-list').innerHTML = '';
                } else {
                    showResult('批量文件上传失败：' + result.msg, false);
                }
            } catch (error) {
                showProgress('batch', 100);
                showResult('批量文件上传失败：' + error.message, false);
            } finally {
                uploadBtn.disabled = false;
            }
        }
        
        // 上传到指定存储桶
        async function uploadToBucket() {
            const fileInput = document.getElementById('bucket-file');
            const bucketName = document.getElementById('bucket-name').value.trim();
            const uploadBtn = document.getElementById('bucket-upload-btn');
            
            if (!fileInput.files[0]) {
                showResult('请先选择文件', false);
                return;
            }
            
            uploadBtn.disabled = true;
            showProgress('bucket', 10);
            
            try {
                const formData = new FormData();
                formData.append('file', fileInput.files[0]);
                
                showProgress('bucket', 30);
                
                const url = bucketName ? `/file/upload/${bucketName}` : '/file/upload';
                const response = await fetch(url, {
                    method: 'POST',
                    body: formData
                });
                
                showProgress('bucket', 70);
                
                const result = await response.json();
                
                showProgress('bucket', 100);
                
                if (result.code === 1) {
                    const bucketText = bucketName ? `到存储桶 "${bucketName}"` : '';
                    showResult(`文件上传${bucketText}成功！`, true, result.data);
                    fileInput.value = '';
                    document.getElementById('bucket-files').innerHTML = '';
                } else {
                    showResult('文件上传失败：' + result.msg, false);
                }
            } catch (error) {
                showProgress('bucket', 100);
                showResult('文件上传失败：' + error.message, false);
            } finally {
                uploadBtn.disabled = false;
            }
        }
        
        // 拖拽上传支持
        function setupDragAndDrop() {
            const dropZones = document.querySelectorAll('.file-input-wrapper');
            
            dropZones.forEach(zone => {
                zone.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.style.background = '#e3f2fd';
                    this.style.borderColor = '#764ba2';
                });
                
                zone.addEventListener('dragleave', function(e) {
                    e.preventDefault();
                    this.style.background = '#f8f9fa';
                    this.style.borderColor = '#667eea';
                });
                
                zone.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.style.background = '#f8f9fa';
                    this.style.borderColor = '#667eea';
                    
                    const files = e.dataTransfer.files;
                    const input = this.querySelector('input[type="file"]');
                    
                    if (input.id === 'single-file') {
                        input.files = files;
                        handleFileSelect(files, 'single');
                    } else if (input.id === 'batch-files') {
                        input.files = files;
                        handleFileSelect(files, 'batch');
                    } else if (input.id === 'bucket-file') {
                        input.files = files;
                        handleFileSelect(files, 'bucket');
                    }
                });
            });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            setupDragAndDrop();
        });
    </script>
</body>
</html>
